<template>
    <div class="charts-render-wrap">
        <div :id="chartOpt && chartOpt.id" class="chart-innter-wrap"
             :style="{width:chartStyle.width,height:chartStyle.height}"></div>
    </div>
</template>

<script>
    let echarts = require('echarts')
    export default {
        name: 'itemChartComponent',
        props: {
            chartOpt: {
                type: Object,
                required: true,
            },
            chartDate: {
                type: Array,
                required: true,
            },
            chartStyle: {
                type: Object,
                required: true,
                default () {
                    return {
                        width: '600px',
                        height: '500px',
                    }
                },
            },
        },
        data () {
            return {
                pieChartObj: {}, // 存储扫描图表渲染的对象
            }
        },
        watch: {
            chartDate: {
                handler (val) {
                    this.watchDate()
                },
                deep: true,
                immediate: false
            }
        },
        mounted () {
            if (this.chartOpt) {
                // 初始化图表
                let dom = document.getElementById(this.chartOpt.id)
                this.pieChartObj[this.chartOpt.id] = echarts.init(dom)

                // 指定图表的配置项和数据
                let scanChartOption = this.chartOpt.option

                // 使用scanChartOption配置的选项和数据来显示图表
                this.pieChartObj[this.chartOpt.id].setOption(scanChartOption)
                //this.$emit('fItem-chart', this.pieChartObj[this.chartOpt.id])
                window.addEventListener('resize', this.resizeChart,true)
            }
            this.init()
            this.watchDate()
        },
        methods: {
            resizeChart(){
                let dom = document.getElementById(this.chartOpt.id)
                if (this.chartOpt) {
                    echarts.init(dom).resize()
                }
            },
            // 实时动态图表变化
            watchDate () {
                if (this.chartOpt.id === 'cpuChartArea' || this.chartOpt.id === 'ramChartArea') {
                    this.pieChartObj[ this.chartOpt.id ].setOption ({
                        series: [
                            {
                                data: this.chartDate[ 1 ].yData
                            }
                        ],
                        yAxis: {
                            name: '（' + this.chartDate[ 1 ].unit + '）'
                        },
                        xAxis: {
                            data: this.chartDate[ 0 ].xData
                        }
                    })
                } else if (this.chartOpt.id === 'barBarChartArea') {
                    this.pieChartObj[this.chartOpt.id].setOption({
                        series: [
                            {
                                data: this.chartDate[1].data
                            },
                            {
                                data: this.chartDate[2].data
                            },
                        ],
                        yAxis: {
                            data: this.chartDate[0].data
                        },
                    })
                } else if (this.chartOpt.id === 'algBarChartArea') {
                    this.pieChartObj[this.chartOpt.id].setOption({
                        legend: {
                            data: this.chartDate[0].data
                        },
                        series: this.chartDate[2].data,
                        xAxis: {
                            data: this.chartDate[1].data
                        },
                    })
                }
                if (this.chartOpt.id === 'deviceDistributeChartArea'  || this.chartOpt.id === 'proportionChartArea') {
                    this.pieChartObj[this.chartOpt.id].setOption({
                        legend: {
                            data: this.chartDate[0].data
                        },
                        series: this.chartDate[1].data,
                    })
                }
            },
            // 图表对应数据初始化
            init () {
                if (this.chartOpt.id === 'cpuChartArea' || this.chartOpt.id === 'ramChartArea') {
                    this.pieChartObj[ this.chartOpt.id ].setOption ({
                        series: [
                            {
                                data: this.chartDate[ 1 ].yData
                            }
                        ],
                        yAxis: {
                            name: '（' + this.chartDate[ 1 ].unit + '）'
                        },
                        xAxis: {
                            data: this.chartDate[ 0 ].xData
                        }
                    })
                } else if (this.chartOpt.id === 'barBarChartArea') {
                    this.pieChartObj[this.chartOpt.id].setOption({
                        series: [
                            {
                                data: this.chartDate[1].data
                            },
                            {
                                data: this.chartDate[2].data
                            },
                        ],
                        yAxis: {
                            data: this.chartDate[0].data
                        },
                    })
                } else if (this.chartOpt.id === 'algBarChartArea') {
                    this.pieChartObj[this.chartOpt.id].setOption({
                        legend: {
                            data: this.chartDate[0].data
                        },
                        series: this.chartDate[2].data,
                        xAxis: {
                            data: this.chartDate[1].data
                        },
                    })
                }
                if (this.chartOpt.id === 'deviceDistributeChartArea'  || this.chartOpt.id === 'proportionChartArea') {
                    this.pieChartObj[this.chartOpt.id].setOption({
                        legend: {
                            data: this.chartDate[0].data
                        },
                        series: this.chartDate[1].data,
                    })
                }
            }
        },
        destroyed () {
            this.pieChartObj[this.chartOpt.id].clear()
            window.removeEventListener('resize' ,this.resizeChart,true)
        }
    }
</script>
<style type="text/css">
    .chart-innter-wrap > div:first-child {
        margin: 0 auto !important;
    }
</style>
